<template>
  <div>

    <!-- 如无需展开查询，请移除:advanced.sync="advanced"并添加:no-advanced="true" -->
    <e-pro-table title="页面管理" :advanced.sync="advanced" :no-advanced="true">
      <template slot="query">
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-model-item label="标题">
            <a-input v-model="queryParam.title"/>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
          <a-form-model-item label="别名">
            <a-input v-model="queryParam.slug"/>
          </a-form-model-item>
        </a-col>
      </template>

      <template slot="button">
        <e-btn-add permissions="cms:page:save" to="/cms/page/input"/>
        <e-btn-remove-batch permissions="cms:page:remove" :loading.sync="removeBathLoading" :ids="selectedRowKeys" :click-callback="remove"/>
      </template>

      <template slot="table">
        <s-table
          ref="eTable"
          :columns="columns"
          :data="loadData"
          :alert="true"
          :rowSelection="rowSelection"
          showPagination="auto"
        >
          <template #action="text, record">
            <a-tooltip placement="top">
              <template #title>
                <span>预览</span>
              </template>
              <a-button size="small" icon="eye" @click="preview(record)"/>
            </a-tooltip>
            <a-divider type="vertical"/>
            <e-btn-edit permissions="cms:page:save" :to="`/cms/page/input`" :tab-name="record.title" :id="record.id"/>
            <e-btn-remove permissions="cms:page:remove" :id="record.id" :divider="false" :click-callback="remove"/>
          </template>
        </s-table>
      </template>
    </e-pro-table>

    <cms-chose-site/>
  </div>
</template>

<script>
import { select, remove } from '@/api/cms/page'
import { formatDate } from '@/utils/util'
import { STable, Ellipsis } from '@/components'
import EProTable from '@/components/Easy/data-display/ProTable'
import EBtnAdd from '@/components/Easy/general/BtnAdd'
import EBtnEdit from '@/components/Easy/general/BtnEdit'
import EBtnRemove from '@/components/Easy/general/BtnRemove'
import EBtnRemoveBatch from '@/components/Easy/general/BtnRemoveBatch'
import EDictTag from '@/components/Easy/data-display/DictTag'
import EDictSelect from '@/components/Easy/data-entry/DictSelect'
import CmsChoseSite from '@/views/cms/ChoseSite'

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: 220,
    sorter: true
  },
  {
    title: '别名',
    dataIndex: 'slug',
    width: 100,
    sorter: true
  },
  {
    title: '模板',
    dataIndex: 'template',
    width: 100,
    sorter: true
  },
  {
    title: '更新人',
    dataIndex: 'editUser',
    width: 100,
    sorter: true
  },
  {
    title: '更新时间',
    dataIndex: 'editDate',
    width: 170,
    sorter: true,
    customRender: (text) => formatDate(text)
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 140,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'CmsPageList',
  components: {
    CmsChoseSite,
    STable,
    Ellipsis,
    EProTable,
    EBtnAdd,
    EBtnEdit,
    EBtnRemove,
    EBtnRemoveBatch,
    EDictTag,
    EDictSelect
  },
  data () {
    this.columns = columns
    return {
      VUE_APP_API_BASE_URL: process.env.VUE_APP_API_BASE_URL,

      // 查询参数
      advanced: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      removeBathLoading: false
    }
  },
  activated () {
    this.$refs.eTable.refresh(true)
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    // 加载数据方法 必须为 Promise 对象
    loadData (parameter) {
      const requestParameters = Object.assign({}, parameter, this.queryParam)
      return select(requestParameters)
        .then(res => {
          return res.data
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    remove (id) {
      remove(id).then(res => {
        this.$refs.eTable.refresh(true)
        this.removeBathLoading = false
      }).catch(({ response }) => {
        this.removeBathLoading = false
      })
    },
    preview (record) {
      window.open(`${this.VUE_APP_API_BASE_URL}/cms/route/${record.siteId}/page/${record.slug}`)
    }
  }
}
</script>
